<template>
  <div class="layout">
    <el-container v-if="state.showMenu" class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <span>社邻拼商家端</span>
          </div>
        </div>
        <div class="line" />
        <el-menu
          :default-openeds="state.defaultOpen"
          background-color="#495259"
          text-color="#fff"
          :router="true"
          :default-active='state.currentPath'
        > 
          <el-menu-item index="/introduce">
          <i class="el-icon-s-data" />
          <template #title>店铺首页</template>
        </el-menu-item>
          <el-submenu index="1">
            <template #title>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="/introduce"><i class="el-icon-s-data" />店铺首页</el-menu-item> -->
              <el-menu-item index="/add"><i class="el-icon-circle-plus" />添加商品</el-menu-item>
              <el-menu-item index="/glist"><i class="el-icon-s-order" />商品列表</el-menu-item>
              <el-menu-item index="/goodpick"><i class="el-icon-s-management" />商品自提点</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
               <el-menu-item index="/orderlist"><i class="el-icon-s-fold" />订单列表</el-menu-item>
              <!-- <el-menu-item index="/evalation"><i class="el-icon-s-comment" />评价管理</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-submenu index="3">
            <template #title>
              <span>打单系统</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/dashboard"><i class="el-icon-odometer" />Dashboard</el-menu-item>
              <el-menu-item index="/category"><i class="el-icon-menu" />分类管理</el-menu-item>
              <el-menu-item index="/good"><i class="el-icon-s-goods" />商品管理</el-menu-item>
              <el-menu-item index="/guest"><i class="el-icon-user-solid" />会员管理</el-menu-item>
              <el-menu-item index="/order"><i class="el-icon-s-order" />订单管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <span>店铺管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/swiper"><i class="el-icon-picture" />轮播图配置</el-menu-item>
              <el-menu-item index="/hot"><i class="el-icon-star-on" />热销商品配置</el-menu-item>
              <el-menu-item index="/new"><i class="el-icon-sell" />新品上线配置</el-menu-item>
              <el-menu-item index="/recommend"><i class="el-icon-thumb" />为你推荐配置</el-menu-item>
              <el-menu-item index="/account"><i class="el-icon-lock" />修改密码</el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->
        </el-menu>
      </el-aside>
      <el-container>
        <el-header><Header /></el-header>
        <el-main><router-view /></el-main>
        <el-footer> <Footer /></el-footer>
      </el-container>
    </el-container>

    <el-container v-else class="container">
      <router-view />
    </el-container>
  </div>
</template>

<script>
import { onUnmounted, reactive } from 'vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router'
import { pathMap } from '@/utils'
import { store } from '@/store'
export default {
  name: 'App',
  components: {
    Header,
    Footer
  },
  setup() {
    const noMenu = ['/login']
    const router = useRouter()
    const state = reactive({
      defaultOpen: [],
      showMenu: true,
      currentPath: '/introduce',
    
    })
    // 监听浏览器原生回退事件  15680001382
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', () => {
       const now = Date.now()
       const expries=store.getters.expries;
        if (now >= expries) {//时间过期了就返回登录
          state.showMenu = false
        }
      }, false);
    }
    const unwatch = router.beforeEach((to, from, next) => {//router.beforeEach以下方法在警卫之前注册全局,可选的第三个参数 next,next在任何给定的通过导航守卫中必须调用一次
       // console.log('导航钩子、前置钩子',to)
      if (to.path == '/login') { // 如果路径是 /login 则正常执行
        next()
      } else {
        // 如果不是 /login，判断时间是否过期 
         const expries=store.getters.expries;
         const now = Date.now()
        if (now >= expries) {// 如果过期，则跳至登录页面
          next({ path: '/login' })
        } else {
          if(to.path == '/OrderDetail'&&!to.query.hasOwnProperty('id')){
             next(false)
          }else{ // 否则继续执行
             next()
          }
        }
      }
      state.showMenu = !noMenu.includes(to.path)
      state.currentPath = to.path
      document.title = pathMap[to.name]
    })

    onUnmounted(() => {
      unwatch()
    })

    return {
      state
    }
  }
}
</script>

<style>
   /* "vite-plugin-babel-import": "^2.0.2", */
/* .el-cascader-menu {max-height: 410px !important; overflow-y:scroll;} */
/* .el-cascader-menu ::-webkit-scrollbar{display:none !important}222832 */
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,article,aside,footer,header,hgroup,nav,section,menu{margin:0; padding:0;-webkit-text-size-adjust:100%;}
.container {height: 100vh;}
.layout { min-height: 100vh;background-color: #ffffff;}
.aside { width: 200px!important;background-color: #495259;overflow: hidden; overflow-y: auto; -ms-overflow-style: none; overflow: -moz-scrollbars-none;}
.aside::-webkit-scrollbar {display: none;}
.head {display: flex;align-items: center;justify-content: center; height: 60px;background: #222832;}
.head > div {display: flex;align-items: center;}
.head img {width: 50px;height: 50px; margin-right: 10px;}
.head span { font-size: 20px; color: #ffffff;}
.line { border-top: 1px solid hsla(0,0%,100%,.05);border-bottom: 1px solid rgba(0,0,0,.2);}
.mui-ellipsis2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; }
</style>
<style>
  body {padding: 0;margin: 0;box-sizing: border-box;}
  .el-header{ background:#495259;color:#fff;height: 70px;}
  .el-menu { border-right: none!important;}
  .el-cascader-panel{height: 410px ; }
  .el-scrollbar .el-cascader-menu{overflow-y:scroll !important;} 
  .el-submenu {border-top: 1px solid hsla(0, 0%, 100%, .05);border-bottom: 1px solid rgba(0, 0, 0, .2);}
  .el-submenu:first-child {border-top: none;}
  .el-submenu [class^="el-icon-"] {vertical-align: -1px!important;}
   a{ color: #409eff;text-decoration: none;}
  .el-pagination {text-align: center;margin-top: 20px;}
  .el-popper__arrow {display: none;}
</style>
